<template>
  <div>
    <div class="sHead"
      ><el-row>
        <el-col :span="12">
          <div class="head"
            ><img style="margin: 0 15px 0 20px" src="../../assets/imgs/区管-评价类型.png" />
            <p>指标管理--评价进度</p
            ><el-button
              style="
                background-color: #2c8e79;
                color: #ffffff;
                border-radius: 10px;
                padding: 10px;
                margin-left: 10px;
              "
              @click="back()"
              size="small"
              >返回上一级</el-button
            ></div
          >
        </el-col>
        <el-col :span="12" class="export">
          <div class="Headicon"><Icon icon="typcn:export" color="#54b46b" :size="30" /></div
        ></el-col>
      </el-row>

      <el-row justify="space-evenly" align="center" class="selectbox">
        <el-col :span="1"><span>学期</span></el-col>
        <el-col :span="6">
          <el-select
            v-model="studentData.term"
            @change="term(studentData.term)"
            placeholder="Select"
            style="width: 90%"
          >
            <el-option label="2022-2023第一学期" value="2022-one" />
            <el-option label="2022-2023第二学期" value="2022-two" /> </el-select
        ></el-col>
        <el-col :span="1"><span>学校</span></el-col>
        <el-col :span="6">
          <el-select
            v-model="studentData.school"
            placeholder="Select"
            style="width: 90%"
            @change="school(studentData.school)"
          >
            <el-option label="云龙学校" value="1" />
            <el-option label="技术学校" value="5" /> </el-select
        ></el-col>
        <el-col :span="1"><span>年级</span></el-col>
        <el-col :span="6">
          <el-select
            v-model="studentData.grade"
            placeholder="Select"
            style="width: 90%"
            @change="searchGrade(studentData.grade)"
          >
            <el-option label="全部" value="全部" />
            <el-option label="一年级" value="一年级" />
            <el-option label="二年级" value="二年级" /> </el-select
        ></el-col>
      </el-row>

      <el-row justify="space-evenly" align="center" class="selectbox">
        <el-col :span="1"><span>班级</span></el-col>
        <el-col :span="6">
          <el-select
            v-model="studentData.class"
            placeholder="Select"
            style="width: 90%"
            @change="search(studentData.class)"
          >
            <el-option label="全部" value="全部" />
            <el-option label="0班" value="0班" />
            <el-option label="1班" value="1班" /> </el-select
        ></el-col>
        <el-col :span="1"><span>等级</span></el-col>
        <el-col :span="6">
          <el-select
            v-model="studentData.level"
            placeholder="Select"
            style="width: 90%"
            @change="searchLevel(studentData.level)"
          >
            <el-option label="全部" value="全部" />
            <el-option label="A" value="A" />
            <el-option label="D" value="D" /> </el-select
        ></el-col>
        <el-col :span="1"><span>姓名</span></el-col>
        <el-col :span="6"
          ><el-input placeholder="" style="width: 65%" v-model="studentData.name" /><el-button
            @click="searchName(studentData.name)"
            type=""
            style="
              margin-left: 10px;
              background-color: #2c8e79;
              color: #ffffff;
              width: 70px;
              border-radius: 10px;
              height: 30px;
            "
            >查询</el-button
          ></el-col
        >
      </el-row>

      <div style="margin-top: 80px">
        <el-table
          :header-cell-style="{ background: '#e0f4df', color: '#49ac6e' }"
          :data="studentData.data"
          style="width: 100%"
        >
          <el-table-column prop="school" label="学校" width="100" align="center" />
          <el-table-column prop="grade" label="年级" width="100" align="center" />
          <el-table-column prop="class" label="班级" width="100" align="center" />
          <el-table-column prop="studentId" label="学号" width="100" align="center" />
          <el-table-column prop="name" label="姓名" width="100" align="center" />
          <el-table-column label="性别" width="100" align="center">
            <template #default="scope">
              <p v-if="scope.row.gender == 1">男</p>
              <p v-if="scope.row.gender == 0">女</p>
            </template>
          </el-table-column>
          <el-table-column label="了解党国国情，珍视国家......" align="center">
            <el-table-column prop="guardian" label="家长评" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.guardian == 'D'" type="danger">D</el-tag>
                <p v-if="scope.row.guardian == 'A'">A</p>
              </template>
            </el-table-column>
            <el-table-column prop="self" label="自评" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.self == 'D'" type="danger">D</el-tag>
                <p v-if="scope.row.self == 'A'">A</p>
              </template>
            </el-table-column>
            <el-table-column prop="teacher" label="师评" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.teacher == 'D'" type="danger">D</el-tag>
                <p v-if="scope.row.teacher == 'A'">A</p>
              </template>
            </el-table-column>
            <el-table-column prop="mutual" label="互评" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.mutual == 'D'" type="danger">D</el-tag>
                <p v-if="scope.row.mutual == 'A'">A</p>
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="了解党国国情，珍视国家......" align="center">
            <el-table-column prop="guardian" label="家长评" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.guardian == 'D'" type="danger">D</el-tag>
                <p v-if="scope.row.guardian == 'A'">A</p>
              </template>
            </el-table-column>
            <el-table-column prop="self" label="自评" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.self == 'D'" type="danger">D</el-tag>
                <p v-if="scope.row.self == 'A'">A</p>
              </template>
            </el-table-column>
            <el-table-column prop="teacher" label="师评" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.teacher == 'D'" type="danger">D</el-tag>
                <p v-if="scope.row.teacher == 'A'">A</p>
              </template>
            </el-table-column>
            <el-table-column prop="mutual" label="互评" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.mutual == 'D'" type="danger">D</el-tag>
                <p v-if="scope.row.mutual == 'A'">A</p>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { getStudentList } from '@/api/school'
import { useRoute } from 'vue-router'
import { reactive, ref } from 'vue'
import router from '@/router'
const route = useRoute()

let id = ref(route.query.Id)
let back = () => {
  console.log(router.push({ path: '/evaluation/progress' }))
}
let studentData = reactive({
  data: [{}],
  class: '全部',
  school: '全部',
  grade: '全部',
  level: '全部',
  name: '',
  data2: [{}],
  term: '2022-2023第一学期'
})
interface studentData {
  name: string
  class: string
  level: string
  self: string
  grade: string
  guardian: string
  mutual: string
  tearcher: string
}
let school = (schoolId: number) => {
  id.value = schoolId
  getStudentList({
    term: '2022-one',
    current: 1,
    size: 10,
    schoolId: id.value
  }).then((resp) => {
    // console.log(resp)
    studentData.data = resp.result.page
    console.log(resp.result.page)

    studentData.data2 = resp.result.page
  })
}
const studentList = () => {
  getStudentList({
    term: '2022-one',
    current: 1,
    size: 10,
    schoolId: id.value
  }).then((resp) => {
    // console.log(resp)
    studentData.data = resp.result.page
    console.log(resp.result.page)

    studentData.data2 = resp.result.page
  })
}
let getTerm2 = () => {
  getStudentList({
    term: '2022-two',
    current: 1,
    size: 10,
    schoolId: id.value
  }).then((resp) => {
    // console.log(resp)
    studentData.data = resp.result.page
    studentData.data2 = resp.result.page
  })
}
const term = (term: string) => {
  console.log(term)

  if (term == '2022-one') {
    studentList()
  } else if (term == '2022-two') {
    getTerm2()
  } else {
    studentList()
  }
  console.log(studentData.data)
}
let arr: any[] = []
const search = (str: string) => {
  studentData.data = studentData.data2
  studentData.data.forEach((value: studentData, index) => {
    if (str == '全部') {
      term(studentData.term)

      console.log(str)
    } else if (value.class == str) {
      arr.push(value)
    }
  })
  console.log(arr)
  studentData.data = arr
  arr = []
}
studentList()
let searchSchool = (str: string) => {}

let nameArr: any[] = []

let searchName = (str: string) => {
  studentData.data.forEach((value: studentData, index) => {
    if (value.name == str) {
      nameArr.push(value)
    }
  })

  studentData.data = nameArr
  nameArr = []
  console.log(studentData.data)
}
let levelArr: any[] = []
let searchLevel = (str: string) => {
  studentData.data = studentData.data2
  studentData.data.forEach((value: studentData) => {
    let i = 0
    if ('全部' == str) {
      studentData.data = studentData.data2
      return true
    }
    if (value.self == str) {
      i++
    }
    if (value.guardian == str) {
      i++
    }
    if (value.mutual == str) {
      i++
    }
    if (value.tearcher == str) {
      i++
    }
    if (i >= 1) {
      levelArr.push(value)
    }
  })
  console.log(levelArr)

  studentData.data = levelArr
  levelArr = []
}
let gradeArr: any[] = []
let searchGrade = (str: string) => {
  studentData.data = studentData.data2
  studentData.data.forEach((value: studentData) => {
    if (str == '全部') {
      gradeArr = studentData.data2
      return true
    } else if (value.grade == str) {
      gradeArr.push(value)
    }
  })
  studentData.data = gradeArr
  gradeArr = []
}
</script>

<style>
.selectbox {
  display: flex;
  align-items: center;
}
.colmargin {
  margin: 0px 20px 0px 25px;
}
.export {
  display: flex;
  justify-content: flex-end;
  padding-right: 10px;
}
.el-row {
  margin-bottom: 20px;
}
.sHead {
  background-color: #ffffff;
  width: 100%;
  height: 190px;
  border-radius: 10px;
  color: #7a7a7a;
  padding: 10px;
}
/* .tHeadNew {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  width: 50%;
  padding-right: 50px;
} */
.head {
  display: flex;
  align-items: center;
  height: 100%;
}
</style>
